<template>

  <div v-if="cinemaTicket.channelId" class="movie_ticket_page">
    <headerBack>{{cinemaTicket.cinemaData.nm}}</headerBack>
    <div class="cinema_ticket_box">
      <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
        <div >
          <div class="cinema_title_wrapper">
              <div class="cinema_info">
                  <div class="cinema_title">{{cinemaTicket.cinemaData.nm}}</div>
                  <div class="cinema_address">{{cinemaTicket.cinemaData.addr}}</div>
              </div>
              <div class="cinema_img_wrapper"><img src="@/assets/images/address.png" alt=""></div>
          </div>
          <swiper class="cinema_ticket_swiper-wrapper" :movie-index="movieIndex" :cinema-ticket="cinemaTicket" @swiper-change-index="swiperIndex">
              <div class="swiper-slide"  v-for="(item,index) in cinemaTicket.showData.movies" :key="item.id" @tap="movieTicket(item,index)">
                  <img :src="item.img | filterImg" alt="">
              </div>
          </swiper>
          <cinemaTicketSell :movie-id="movieId" :cinema-ticket="cinemaTicket"></cinemaTicketSell>
          <cinemaSnack :cinema-ticket="cinemaTicket"></cinemaSnack>
        </div>
      </Scroller>
    </div>

  </div>
</template>

<script>
import headerBack from '../header/headerBack'
import swiper from '../cinemaTicket/cinemaTicket/cinemaTicketSellSwiper'
import cinemaTicketSell from '../cinemaTicket/cinemaTicket/cinemaTicketSell.vue'
import cinemaSnack from '../cinemaTicket/cinemaTicket/cinemaSnack'

export default {

  data () {
    return {
      movieId: null,
      movieIndex: 0,
      cinemaTicket: []
    }
  },
  filters: {
    filterImg (item) {
      return item.replace('w.h', '148.208')
    }
  },
  components: {
    headerBack, swiper, cinemaTicketSell, cinemaSnack
  },
  mounted () {
    this.movieId = this.$route.query.movieId ? this.$route.query.movieId : ''
    let url = ''
    if (this.movieId) {
      url = `ajax/cinemaDetail?cinemaId=${this.$route.query.cinemaId}&movieId=${this.$route.query.movieId}`
    } else {
      url = `ajax/cinemaDetail?cinemaId=${this.$route.query.cinemaId}`
    }

    this.axios({
      method: 'get',
      url: url
    }).then(res => {
      if (res.data.channelId) {
        this.cinemaTicket = res.data
        for (let i = 0; i < this.cinemaTicket.showData.movies.length; i++) {
          if (this.cinemaTicket.showData.movies[i].id == this.movieId) {
            this.movieIndex = i
            console.log('当前电影数据', this.movieIndex, this.movieId)
            break
          } else {
            this.movieId = this.cinemaTicket.showData.movies[0].id
          }
        }
      }
    })
  },
  methods: {

    // 获取轮播当前索引
    swiperIndex (index) {
      console.log('------------')
      let id = this.cinemaTicket.showData.movies[index].id
      this.movieTicket({ id: id }, index)
      this.movieIndex = index
    },
    // 切换电影轮播
    movieTicket (item, index) {
      if (this.movieId !== item.id) {
        this.movieId = item.id
        this.$router.replace({
          path: '/cinemaTicket',
          query: {
            cinemaId: this.cinemaTicket.cinemaData.cinemaId,
            movieId: item.id
          }
        })
      }
    },

    // 滚动事件
    handleToScroll (pos) {

    },
    handleToTouchEnd () {

    }
  }

}
</script>
<style>

.movie_ticket_page{width: 100%;height:100%; position: relative;display: flex;flex-direction: column;}
.cinema_ticket_box {height:100%;overflow: hidden;}
.cinema_title_wrapper{width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 15px}
.cinema_info{width: 85%;}
.cinema_title{font-size: 17px;color: #333;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.cinema_address{font-size: 13px;color: #999;margin-top: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.cinema_img_wrapper{width: 15%;text-align: right}
.cinema_img_wrapper img{width: 25px;height: 30px;}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    /* Center slide text vertically; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    }
.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
}
.swiper-slide-active{
    width: 80px !important;
    height: 110px;
    border: 2px solid white

}
.swiper-slide img{
  width: 100%;
  height: 100%;
}

.cinema_ticket_swiper-wrapper{padding: 10px 0;height: 135px;}
</style>
